<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        /* 商品展示 */
        #showGoods {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        #showGoods li {
            width: 18%;
            box-sizing: border-box;
            padding: 10px;
            font-size: 13px;
            line-height: 20px;
        }

        #showGoods li:hover {
            box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        }

        #showGoods li img {
            width: 70%;
            display: block;
            margin: 20px auto;
        }

        #showGoods li .price {
            color: red;
        }

        #showGoods li .name {
            /* 多行文本溢出隐藏 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #searchBox {
            width: 1226px;
            height: 32px;
            margin: 50px auto;
            display: flex;
            font-size: 13px;
        }

        #searchBox .searchBar {
            width: 300px;
            height: 32px;
            border: 1px solid #333;
            display: flex;
        }

        #searchBox .searchBar .searchCon {
            outline: none;
            border: 0;
            width: 268px;
            height: 32px;
        }

        #searchBox .searchBar .searchBtn {
            flex: 1;
            background-color: grey;
        }

        .orderColBox,
        .orderTypeBox {
            margin-left: 20px;
            line-height: 32px;
            padding: 0 10px;
            border: 1px dashed #333;
        }

        .orderColBox .active {
            color: pink;
        }

        .orderTypeBox .active {
            color: pink;
        }

        .showPageBox {
            margin-left: 20px;
            line-height: 32px;
        }

        .showPageBox select {
            height: 32px;
            outline: none;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="searchBox">
            <div class="searchBar">
                <input type="text" class="searchCon" v-model="wd">
                <a href="javascript:;" class="searchBtn"></a>
            </div>
            <div class="orderColBox">
                <span class="orderCol" :class="{active:col=='_id'}" @click="col='_id'" data-col="_id">默认</span>
                <span class="orderCol" :class="{active:col=='title'}" @click="col='title'" data-col="title">名称</span>
                <span class="orderCol" :class="{active:col=='price'}" @click="col='price'" data-col="price">价格</span>
            </div>
            <div class="orderTypeBox">
                <span class="orderType" :class="{active:type=='asc'}" @click="type='asc'" data-type="asc">升序</span>
                <span class="orderType" :class="{active:type=='desc'}" @click="type='desc'" data-type="desc">降序</span>
            </div>
            <div class="showPageBox">
                <select class="showPage" v-model="size">
                    <option value="5">每页显示5条</option>
                    <option value="10">每页显示10条</option>
                    <option value="15">每页显示15条</option>
                    <option value="20">每页显示20条</option>
                </select>
            </div>
        </div>
        <ul id="showGoods">
            <li v-for="goods in list" :key="goods._id">
                <a href="">
                    <img :src="goods.img" alt="">
                    <div class="price">{{goods.price.toFixed(2)}}</div>
                    <div class="name" v-text="goods.title"></div>
                </a>
            </li>
        </ul>
        <div class="pageBox" style="text-align: center;">
            <button @click="page--">上一页</button>
            <button @click="page++">下一页</button>
        </div>
    </div>
</body>
<script>
    // 声明式渲染 ()
    var vm = new Vue({
        el: "#app",
        data: {
            wd: "",
            col: "_id",
            type: "asc",
            page: 1,
            size: 10,
            maxPage: null,
            list: [],
        },
        methods: {
            getData() {
                // "http://localhost:3000/goods/get?wd=&col=_id&type=asc&page=1&size=10"
                // wd 搜索的关键词 ""查询所有数据
                // col 排序的字段名 (_id title price)
                // type 排序的方式  asc(升序)  desc(降序)
                // page 第几页
                // size 每页显示多少条 
                axios.get("http://localhost:3000/goods/get", {
                    params: {
                        wd: this.wd,
                        col: this.col,
                        type: this.type,
                        page: this.page,
                        size: this.size,
                    }
                }).then(res => res.data).then(result => {
                    console.log(result);
                    var { status, message, list, maxPage } = result;
                    if (result.status == 200) {
                        this.list = list;
                        this.maxPage = maxPage;
                    }
                })
            }
        },
        watch: {
            wd: function () {
                console.log("wd修改了");
                this.getData();
            },
            col() {
                console.log("col修改了");
                this.getData();
            },
            type() {
                console.log("type修改了");
                this.getData();
            },
            size() {
                console.log("size修改了");
                this.getData();
            },
            page(newVal, oldVal) {
                console.log("page修改了");
                if (newVal < 1) {
                    this.page = 1;
                    return false;
                }
                if (newVal > this.maxPage) {
                    this.page = this.maxPage;
                    return false;
                }
                this.getData();
            }
        },
        // 在Vue实例初次渲染(挂载)完成之后执行的钩子函数 (有没有这个函数 都不会影响Vue初次渲染 -> 此函数可以帮助我们在渲染完成之后 执行一些而外的操作 -> 比如说数据请求)
        mounted() {
            console.log("挂载完毕");   // this -> 当前实例化对象
            this.getData();
        },

    })




</script>

</html>